<head>
    <title>内部样式表示例</title>
    <style>
        
    * {
        background: url("/static/bg.png") no-repeat;
        margin: 0;
        padding: 0;
    }

    .home {
        height: 100%;
        overflow: hidden;
    }

    .content {
        perspective: 340px;
        width: 100%;
        position: relative;
    }

    h1 {
        color: white;
        text-align: center;
    }

    span {
        display: block;
        text-align: center;
    }

    .stars {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 2px;
        height: 2px;
        z-index: 999;
        border-radius: 50%;
        box-shadow: -447px 387px #c4c4c4, -401px 118px #fafafa, -109px 217px #d9d9d9, -680px -436px #e3e3e3, 514px 360px #cccccc, -708px 298px #e8e8e8, -696px -270px #ededed, 116px -128px #f7f7f7, 179px 35px white, -404px -90px whitesmoke, -331px -309px #c4c4c4, -363px -24px #d1d1d1, 277px 416px #fafafa, -145px -244px whitesmoke, 123px 62px #d4d4d4, -407px 418px #d9d9d9, 535px 237px #d9d9d9, -466px -78px #f7f7f7, 257px 287px #dedede, 327px -398px #e0e0e0, -602px -38px #c2c2c2, 128px 398px #e6e6e6, 274px -446px #d1d1d1, -602px -298px #c7c7c7, 526px -5px #c4c4c4, -90px -158px #fcfcfc, 5px 294px whitesmoke, -633px 229px #c4c4c4, -475px 427px #dedede, 586px -453px #f2f2f2, 180px -432px #c7c7c7, -637px -88px #cfcfcf, -453px 308px #d6d6d6, -111px 1px #d9d9d9, 573px -450px #ededed, 198px 300px #d6d6d6, -355px 166px #dedede, -715px 13px #e3e3e3, 262px -104px #d1d1d1, 147px 325px #dbdbdb, 1px 399px #dbdbdb, 286px -100px white, 43px -329px #e8e8e8, 617px 55px #d9d9d9, -168px -392px #cccccc, 84px 219px #c9c9c9, 507px -226px #d9d9d9, -327px -70px #e6e6e6, 386px -212px #c4c4c4, -717px 4px #cfcfcf, 502px -231px #e3e3e3, 302px 56px #ededed, 649px 341px #c7c7c7, 569px 350px #c9c9c9, 516px -31px #e6e6e6, 689px 447px #c2c2c2, 591px -206px #fafafa, 422px -137px #e6e6e6, -510px -324px #cccccc, -649px 287px #c2c2c2, -194px -48px #f7f7f7, -279px -329px #d1d1d1, -406px 478px #dbdbdb, -735px -87px #c9c9c9, 30px -197px #dedede, -564px 233px #e6e6e6, -486px -324px #ededed, -54px -7px #ededed, -441px -194px #e3e3e3, -133px -95px #e0e0e0, -722px -73px #d6d6d6, 595px 423px #ededed, 568px -39px #ededed, 370px 377px #d1d1d1, -419px -102px #fcfcfc, -450px 109px #c4c4c4, -57px -119px #d1d1d1, -582px 150px #e6e6e6, 206px -263px #cfcfcf, 582px -461px #c9c9c9, -268px -141px #d9d9d9, -148px 291px #c7c7c7, 254px -179px #c9c9c9, 725px 424px #f0f0f0, 391px -150px #ebebeb, 89px -299px #d4d4d4, 170px 1px #c9c9c9, 243px 209px #c7c7c7, 27px 460px #c9c9c9, -465px -380px #d4d4d4, 530px -360px whitesmoke, -626px 53px #e0e0e0, 706px 218px #d9d9d9, 40px -82px #cccccc, -5px -212px #e6e6e6, -742px 33px #ebebeb, -714px 478px #e0e0e0, -585px -125px #cccccc, -216px 348px #cfcfcf, 601px 332px #ededed, 344px -88px #c4c4c4, 659px -22px #d1d1d1, -411px 188px #d6d6d6, -423px -206px #fcfcfc, -359px -136px #cfcfcf, 612px 406px whitesmoke, 725px 96px whitesmoke, 363px -446px white, -204px 325px #c9c9c9, 740px 176px #fafafa, -489px -352px white, -638px 64px #dbdbdb, 537px -65px #dbdbdb, 151px -32px #ebebeb, 681px 212px #fcfcfc, 604px -149px #e6e6e6, -542px -398px #c4c4c4, -707px 66px whitesmoke, -381px 258px #cfcfcf, -30px 332px #d6d6d6, 512px -381px #c9c9c9, 195px 288px #cccccc, -278px 479px #c7c7c7, 27px -208px #d6d6d6, -288px 15px white, -680px 248px #dedede, 433px 31px #c9c9c9, 150px -206px #d4d4d4, -79px 247px white, -594px 115px #e0e0e0, 99px 292px #e0e0e0, 673px -269px #dedede, -257px -64px #d1d1d1, 449px 81px #f2f2f2, 18px -99px #d1d1d1, -694px 415px #f7f7f7, 240px 264px #e0e0e0, 450px -172px white, 383px 7px #e8e8e8, 338px -73px #c9c9c9, 291px -19px #ebebeb, 659px 137px #d1d1d1, 602px -6px #fcfcfc, 554px 249px #ebebeb, 625px 356px #d9d9d9, 579px -183px #d6d6d6, -20px 250px white, -401px 431px #c4c4c4, -645px -232px #cccccc, -265px -148px white, 553px 258px #d1d1d1, 166px -360px #ebebeb, 719px 51px #ededed, 612px -129px #ebebeb, -465px -104px #f2f2f2, -154px -121px #d9d9d9, -1px 330px #f2f2f2, -666px 248px #f7f7f7, -720px 264px #ededed, 148px -365px #e6e6e6, -388px -349px #c4c4c4, 128px -88px #e3e3e3, -683px -274px #fafafa, -341px 41px #c9c9c9, -59px -471px #f0f0f0, -3px -427px #c2c2c2, 418px 167px #d6d6d6, 343px 247px #c7c7c7, 623px -347px #d1d1d1, 716px -217px white, 243px -409px whitesmoke, -75px -126px #d6d6d6, -730px -91px #c9c9c9, -210px -397px #cfcfcf, -349px 180px #c9c9c9, -567px -281px #e0e0e0, -460px 381px #fcfcfc, -310px -22px #ededed, 450px -1px #dbdbdb, -405px -328px #e3e3e3, 5px 332px #d6d6d6, -294px 302px #fcfcfc, -398px 97px whitesmoke, -696px 325px #cfcfcf, -589px 110px #d6d6d6, 353px -411px #dbdbdb, -697px -318px #ebebeb, -114px -72px #f0f0f0, 259px -193px #fcfcfc, 60px 26px #e6e6e6, -63px -232px white, 205px -372px #f7f7f7, -464px -333px #f2f2f2, -374px 123px white, -377px -386px #c7c7c7, -80px 337px #cccccc, 478px -178px #dbdbdb, 222px 420px #ebebeb, -707px 99px #c4c4c4, 716px -132px #fafafa, -253px -286px #e3e3e3, 646px 178px #f0f0f0, 201px 24px #d1d1d1, 178px -58px #c7c7c7, -557px 368px #ededed, 0px 219px #d9d9d9, -266px -269px #cccccc, 242px -197px #c9c9c9, -419px 193px #c2c2c2, -47px 91px #c7c7c7, -109px 75px #c2c2c2, -146px -453px #d6d6d6, 671px -350px #f2f2f2, 421px -91px #d9d9d9, 738px 19px #ededed, -316px -155px #dedede, 419px 244px #fcfcfc, -278px -418px #d6d6d6, -581px -181px #fcfcfc, 139px 264px #d9d9d9, 691px -11px #ebebeb, -622px 402px #c2c2c2, 219px 396px #f0f0f0, -149px -423px white, -716px -78px #d9d9d9, -590px 341px #e6e6e6, -208px 79px #d6d6d6, -227px -24px #f7f7f7, 239px 262px #d1d1d1, 740px 443px #f7f7f7, 509px 134px #d6d6d6, -555px 232px #e8e8e8, -67px -427px #cfcfcf, -368px 250px #f7f7f7, 715px -415px #fafafa, 411px -301px #f0f0f0, -322px 287px #d9d9d9, -429px -90px #f2f2f2, -327px -387px #f0f0f0, -491px 183px #c2c2c2, -133px 250px #d4d4d4, 538px 139px #e3e3e3, -417px -125px #f0f0f0, 653px -351px #e6e6e6, -549px 38px #d4d4d4, 602px 110px whitesmoke, 415px 105px #e0e0e0, -733px -371px #cfcfcf, 286px 403px #d4d4d4, 11px 320px #c4c4c4, -597px 158px whitesmoke, 716px -350px whitesmoke, 321px 67px #fafafa, -237px -300px #cfcfcf, 74px 152px #c9c9c9, 587px -123px #fcfcfc, 699px -332px whitesmoke, 399px 355px #f7f7f7, -323px 314px #dbdbdb, 89px 416px #c7c7c7, 445px 38px #e3e3e3, 572px 122px #c4c4c4, -258px 372px white, 49px 306px #d9d9d9, 437px -35px #dedede, 566px 174px #f2f2f2, 732px -299px whitesmoke, -410px 394px #ededed, 131px -415px white, 19px -326px #e8e8e8, -700px -188px #d1d1d1, 96px -1px #e0e0e0, -328px -396px #f0f0f0, -117px -214px #fcfcfc, -53px 261px #ebebeb, 80px 134px #d6d6d6, -364px -216px white, -636px -125px #dbdbdb, -639px -265px #e3e3e3, 208px 98px #c7c7c7, 172px 467px #e0e0e0, 435px 309px #e3e3e3, 194px -259px #f0f0f0, 209px -186px #c9c9c9, -312px 418px #fafafa, 229px 407px #c9c9c9, -449px -357px #fafafa, 674px 121px #e8e8e8, 608px -429px #ebebeb, -431px -428px #cfcfcf, 105px 462px #e3e3e3, -179px -372px #e3e3e3, 143px -317px #d6d6d6, -449px -149px #fafafa, -544px 250px #dedede, -220px -323px whitesmoke, 658px 8px whitesmoke, -656px -244px #e8e8e8, 347px 11px whitesmoke, 694px -230px #f7f7f7, -317px 1px #c4c4c4, 28px 23px #fcfcfc, -382px 321px #dbdbdb, 632px -74px #c4c4c4, 154px -245px #c2c2c2, -553px 337px #d6d6d6, -48px -243px #d1d1d1, 92px -391px #cccccc, -71px -256px #cfcfcf, -372px 57px #d9d9d9, 369px -140px #fcfcfc, 675px 81px #c2c2c2, -663px 254px #cccccc, 703px -203px #ededed, 74px -363px #c2c2c2, 643px -458px #d1d1d1, 198px 359px #cccccc, 265px 309px #d4d4d4, -353px -368px #e8e8e8, -465px 439px whitesmoke, 693px 360px #c9c9c9, 634px -397px #d1d1d1, 467px 25px whitesmoke, -558px -272px #e6e6e6, 671px 69px #dbdbdb, 407px 357px #cfcfcf, 379px 80px white, 10px -203px #c9c9c9, 104px -292px #f0f0f0, -667px -29px #d1d1d1, 557px -155px #e6e6e6, -505px 115px #cfcfcf, -605px 164px #f2f2f2, -108px -223px #e0e0e0, 523px -156px #ebebeb, 691px 230px white, -507px -13px #d1d1d1, -349px 332px #dedede, 520px 266px whitesmoke, -66px -250px #e6e6e6, -496px -449px #ebebeb, 414px -170px #dedede, -649px 230px #ebebeb, 598px -92px #c7c7c7, -638px 113px #c2c2c2, 151px 363px #f7f7f7, -445px -241px #f0f0f0, 527px -14px #dedede, 203px -61px #cfcfcf, -716px -284px #ebebeb, -525px 134px #c2c2c2;
        animation: fly 15s linear infinite;
        transform-style: preserve-3d;
    }

    .stars:before,
    .stars:after {
        content: "";
        position: absolute;
        width: inherit;
        height: inherit;
        box-shadow: inherit;
    }

    .stars:before {
        transform: translateZ(-300px);
        opacity: .6;
    }

    .stars:after {
        transform: translateZ(-600px);
        opacity: .4;
    }

    @keyframes fly {
        from {
            transform: translateZ(0px);
            opacity: .6;
        }
        to {
            transform: translateZ(200px);
            opacity: .8;
        }
    }

    .title {
        position: absolute;
        display: flex;
        justify-content: center;
        left: 0;
        right: 0;
        top: 300px;
        margin: auto;
        bottom: 0;
        color: #fff;
        font-size: 24px;
        font-weight: 500;
    }

    .titles {
        position: absolute;
        display: flex;
        justify-content: center;
        left: 0;
        right: 0;
        top: 350px;
        margin: auto;
        bottom: 0;
        color: #fff;
        font-size: 20px;
        font-weight: 500;
    }

    .icon {
        width: 15px;
        height: 15px;
        padding: 5px;
        border: 2px solid #fff;
        border-radius: 100%;
        position: absolute;
        left: 49%;
        bottom: 50px;
        animation: downs 2s linear infinite;
    }

    @keyframes downs {
        from {
            transform: translatey(0px);
            opacity: .6;
        }
        to {
            transform: translatey(30px);
            opacity: .8;
        }
    }

    .ribbon {
        display: flex;
        justify-content: center;
        position: absolute;
        right: 100px;
        top: 30px;
        margin: auto;
        background-color: transparent;
    }

    .ribbon:after,
    .ribbon:before {
        margin-top: 0.5em;
        content: "";
        display: flex;
        ;
        border: 1.5em solid #fff;
    }

    .ribbon:after {
        border-right-color: transparent;
    }

    .ribbon:before {
        border-left-color: transparent;
    }

    .ribbon a:link,
    .ribbon a:visited {
        color: #000;
        text-decoration: none;
        height: 3.5em;
        overflow: hidden;
    }

    .ribbon span {
        background: #fff;
        display: inline-block;
        line-height: 3em;
        padding: 0 1.5em;
        margin-top: 0.5em;
        position: relative;
        -webkit-transition: background-color 0.2s, margin-top 0.2s;
        /* Saf3.2+, Chrome */
        -moz-transition: background-color 0.2s, margin-top 0.2s;
        /* FF4+ */
        -ms-transition: background-color 0.2s, margin-top 0.2s;
        /* IE10 */
        -o-transition: background-color 0.2s, margin-top 0.2s;
        /* Opera 10.5+ */
        transition: background-color 0.2s, margin-top 0.2s;
    }

    .ribbon a:hover span {
        background: #FFD204;
        margin-top: 0;
    }

    .ribbon span:before {
        content: "";
        position: absolute;
        top: 3em;
        left: 0;
        border-right: 0.5em solid #9B8651;
        border-bottom: 0.5em solid #fff;
    }

    .ribbon span:after {
        content: "";
        position: absolute;
        top: 3em;
        right: 0;
        border-left: 0.5em solid #9B8651;
        border-bottom: 0.5em solid #fff;
    }

    .introduce {
        display: flex;
        flex-direction: column;
    }

    .introduce_item {
        display: flex;
        justify-content: center;
        margin-top: 60px;
    }

    .introduce_item_img {
        width: 800px;
        height: 500px;
    }

    .introduce_item_title {
        width: 300px;
        font-size: 18px;
        line-height: 36px;
        align-self: center;
        padding-left: 100px;
    }

    .introduce_item_titles {
        width: 300px;
        font-size: 18px;
        line-height: 36px;
        align-self: center;
        padding-right: 100px;
    }

    audio {
        position: fixed;
        bottom: 50px;
        right: 0;
    }

    .music_img {
        position: fixed;
        bottom: 50px;
        right: 50px;
        width: 40px;
        height: 30px;
        animation: muscis 5s linear infinite;
    }

    @keyframes muscis {
        from {
            transform: rotate (0deg);
            opacity: .6;
        }
        to {
            transform: rotate(360deg);
            opacity: .8;
        }
    }

    .icons {
        display: flex;
        justify-content: space-between;
        padding: 0 400px;
        box-sizing: border-box;
        overflow: hidden;
    }

    .icons_items {
        display: flex;
        flex-direction: column;
        font-size: 20px;
        margin-top: 80px;
        width: 200px;
    }

    .icons_items_imgs {
        width: 200px;
        margin-bottom: 30px;
    }
    
    /* 样式文件: styles.css */
    .animated-title {
        font-size: 5em; 
        color: wheat;

        position: absolute; 
        top: 250px; /* 从顶部偏移50px */
        left: 100px; /* 从左边偏移20px */
        background: transparent;
    }

    .animated-title span {
        opacity: 0; /* 初始透明度为0 */
        display: inline-block; /* 保持横向排列 */
        visibility: hidden; /* 初始状态为隐藏 */
    }

    .animated-title span.visible {
        visibility: visible;
        opacity: 1;
        transition: opacity 0.5s; /* 动画时间 */
    }


    /*接下来是副标题*/
    .motivational-text {
        font-size: 3em; /* 设置字体大小 */
        color: wheat; /* 设置字体颜色 */
        opacity: 0; /* 初始透明度为0 */
        transition: opacity 4s; /* 淡入动画时间 */


        position: absolute; 
        top: 380px; /* 从顶部偏移50px */
        left: 30px; /* 从左边偏移20px */
    }

    .motivational-text.visible {
        opacity: 1; /* 透明度变为1 */
    }


    .video-background {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        opacity: 0;
        transition: opacity 6s ease-in; /* 调整为 3 秒的淡入效果 */
    }

    .video-background video {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }





            /* 定义按钮的基础样式 */
        .smooth-button2 {
            position: relative;
            display: inline-block;
            padding: 10px 20px;
            font-size: 16px;
            color: #fff;
            background-color: rgba(0,123,255,0.7);
            border: none;
            border-radius: 5px;
            cursor: pointer;
            overflow: hidden;
            transition: background-color 0.3s ease;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            animation: color-change 3s infinite, ripple-effect2 3s infinite;
        }

        /* 鼠标悬停时的样式 */
        .smooth-button2:hover {
            background-color: rgba(0,86,179,0.7);
            transform: translateY(-2px);
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
        }

        /* 定义颜色变化动画 */
        @keyframes color-change {
            0% {
                background-color: rgba(0,123,255,0.7);
            }
            50% {
                background-color: rgba(237, 211, 211, 0.7);
            }
            100% {
                background-color: rgba(0,123,255,0.7);
            }
        }

        /* 定义涟漪动画 */
        @keyframes ripple-effect2 {
            0% {
                box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3), 0 0 0 10px rgba(0, 123, 255, 0.2);
            }
            50% {
                box-shadow: 0 0 0 20px rgba(255, 255, 255, 0), 0 0 0 30px rgba(0, 123, 255, 0);
            }
            100% {
                box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3), 0 0 0 10px rgba(0, 123, 255, 0.2);
            }
        }




    </style>
</head>



<body>
    <!-- <div id="videoBackground" class="video-background">
        <video id="backgroundVideo" autoplay muted loop>
            <source src="./static/video/space_station.mp4" type="video/mp4">
        </video>
    </div> -->
<!-- 
    <script>
		(function () {
		var a_idx = 0;
		window.onclick = function (event) {
		//var a = new Array("❤富强❤", "❤民主❤", "❤文明❤", "❤和谐❤", "❤自由❤", "❤平等❤", "❤公正❤", "❤法治❤", "❤爱国❤","❤敬业❤", "❤诚信❤", "❤友善❤");
		var a = new Array("暂时没想好写啥1", "暂时没想好写啥2", "暂时没想好写啥3", "暂时没想好写啥4");

		var heart = document.createElement("b"); //创建b元素
		heart.onselectstart = new Function('event.returnValue=false'); //防止拖动

		document.body.appendChild(heart).innerHTML = a[a_idx]; //将b元素添加到页面上
		a_idx = (a_idx + 1) % a.length;
		heart.style.cssText = "position: fixed;left:-100%;"; //给p元素设置样式

		var f = 16, // 字体大小
		x = event.clientX - f / 2, // 横坐标
		y = event.clientY - f, // 纵坐标
		c = randomColor(), // 随机颜色
		a = 1, // 透明度
		s = 1.2; // 放大缩小

		var timer = setInterval(function () { //添加定时器
		if (a <= 0) {
		document.body.removeChild(heart);
		clearInterval(timer);
		} else {
		heart.style.cssText = "font-size:16px;cursor: default;position: fixed;color:" +
		c + ";left:" + x + "px;top:" + y + "px;opacity:" + a + ";transform:scale(" +
		s + ");";

		y--;
		a -= 0.016;
		s += 0.002;
		}
		}, 15)

		}
		// 随机颜色
		function randomColor() {

		return "rgb(" + (~~(Math.random() * 255)) + "," + (~~(Math.random() * 255)) + "," + (~~(Math
		.random() * 255)) + ")";

		}
		}());
	</script> -->
    <!-- <span class="js-cursor-container"></span>
	<script>
		(function fairyDustCursor() {

		var possibleColors = ["#D61C59", "#E7D84B", "#1B8798"]
		var width = window.innerWidth;
		var height = window.innerHeight;
		var cursor = { x: width / 2, y: width / 2 };
		var particles = [];

		function init() {
		bindEvents();
		loop();
		}


		function bindEvents() {
		document.addEventListener('mousemove', onMouseMove);
		window.addEventListener('resize', onWindowResize);
		}

		function onWindowResize(e) {
		width = window.innerWidth;
		height = window.innerHeight;
		}

		function onMouseMove(e) {
		cursor.x = e.clientX;
		cursor.y = e.clientY;

		addParticle(cursor.x, cursor.y, possibleColors[Math.floor(Math.random() * possibleColors.length)]);
		}

		function addParticle(x, y, color) {
		var particle = new Particle();
		particle.init(x, y, color);
		particles.push(particle);
		}

		function updateParticles() {


		for (var i = 0; i < particles.length; i++) {
		particles[i].update();
		}


		for (var i = particles.length - 1; i >= 0; i--) {
		if (particles[i].lifeSpan < 0) {
		particles[i].die();
		particles.splice(i, 1);
		}
		}

		}

		function loop() {
		requestAnimationFrame(loop);
		updateParticles();
		}



		function Particle() {

		this.character = "*";
		this.lifeSpan = 120; //ms
		this.initialStyles = {
		"position": "fixed",
		"top": "0px",
		"left": "0px",
		"pointerEvents": "none",
		"touch-action": "none",
		"z-index": "10000000",
		"fontSize": "25px",
		"will-change": "transform",
        "background": "transparent"
		};


		this.init = function (x, y, color) {

		this.velocity = {
		x: (Math.random() < 0.5 ? -1 : 1) * (Math.random() / 2),
		y: 1
		};

		this.position = { x: x + 10, y: y + 10 };
		this.initialStyles.color = color;

		this.element = document.createElement('span');
		this.element.innerHTML = this.character;
		applyProperties(this.element, this.initialStyles);
		this.update();

		document.querySelector('.js-cursor-container').appendChild(this.element);
		};

		this.update = function () {
		this.position.x += this.velocity.x;
		this.position.y += this.velocity.y;
		this.lifeSpan--;

		this.element.style.transform = "translate3d(" + this.position.x + "px," + this.position.y + "px, 0) scale(" + (this.lifeSpan / 120) + ")";
		}

		this.die = function () {
		this.element.parentNode.removeChild(this.element);
		}

		}


		function applyProperties(target, properties) {
		for (var key in properties) {
		target.style[key] = properties[key];
		}
		}

		if (!('ontouchstart' in window || navigator.msMaxTouchPoints)) init();
		})();
	</script> -->

    <!--  -->
    <div class="home">
            <button onclick="redirectToMainNew()" class="smooth-button2" style="
                border-radius: 50%;
                padding: 0; /* 去掉内边距 */
                width: 80px; /* 设置按钮宽度 */
                height: 80px; /* 设置按钮高度，保持正圆形 */
                opacity: 0.6;
                text-align: center;
                z-index: 9999; /* 确保按钮显示在其他内容之上 */
                background-color: lightblue;
                cursor: pointer;
                display: flex; /* 使用flex布局 */
                align-items: center; /* 垂直居中 */
                justify-content: center; /* 水平居中 */

                position: absolute;
                bottom: 5%;
                left: 51%; 
                transform: translate(-50%, -50%); 
            ">
                ▷|
        </button>
        <div class="content">
            <div class="stars"></div>
            <!-- <img class="bgc" src="./static/PlaceHolder.jpg" width="100%" alt=""> -->
            <h3 class="title animated-title">强大,高效,实惠的运维助手</h3>
            <h3 class="titles motivational-text">点击使用</h3>


            

            <!-- <img class="icon" src="./img/down.png" alt=""> -->
            <div class='ribbon'>
                <a href='./intro', data-sound="./static/Speech_Assistant/uploading.wav"><span>项目简介</span></a>
                <a href='./about', data-sound="./static/Speech_Assistant/about.wav"><span>关于我们</span></a>
                <a href='./add_cash', data-sound="./static/Speech_Assistant/add_credit.wav"><span>充值服务</span></a>
            </div>
            <audio id="hoverSound" preload="auto"></audio>
        </div>


        <!-- <audio autoplay="autoplay" id="audio" loop="loop">
                <source src="./static/music/beautiful_chick.mp3" type="audio/MP3">
        </audio>
        <img class="music_img" src="./static/rolling.jpg" alt=""> -->

        <audio autoplay="autoplay" id="eula_greeting">
            <source src="./static/Speech_Assistant/greeting.wav" type="audio/wav">
        </audio>
    </div>


</body>


<script>

function getUsernameFromUrl() {
    const urlParams = new URLSearchParams(window.location.search);
    return urlParams.get('username');
}
    function redirectToMainNew() {
        const username = getUsernameFromUrl();
        window.location.href = './main_new?username=' + encodeURIComponent(username);
    }

    let mucics = document.getElementById('audio')
    document.body.addEventListener('mousemove', function() {
        mucics.play();
    }, false);


        // 脚本文件: script.js
    document.addEventListener("DOMContentLoaded", function() {
        let SA_greeting = document.getElementById('eula_greeting')
        SA_greeting.play();

        // var videoBackground = document.getElementById('videoBackground');
        // var video = document.getElementById('backgroundVideo');

        // // 当视频可以播放时，开始淡入效果
        // video.addEventListener('canplay', function() {
        //     videoBackground.style.opacity = 0.6; // 设置最终透明度
        // });


        const title = document.querySelector(".animated-title");
        const text = title.textContent;
        const motivationalText = document.querySelector(".motivational-text");
        title.textContent = ""; // 清空原始内容

        // 创建一个span元素包裹每个字符
        for (let i = 0; i < text.length; i++) {
            const span = document.createElement("span");
            span.textContent = text[i];
            title.appendChild(span);
        }

        // 定义逐字淡入和横向移动效果
        const spans = title.querySelectorAll("span");
        let delay = 0;

        // 使用Promise确保所有字符动画完成后再淡入motivationalText
        function animateTitle() {
            return new Promise((resolve) => {
                spans.forEach((span, index) => {
                    setTimeout(() => {
                        span.classList.add("visible");
                        if (index === spans.length - 1) {
                            // 当最后一个字符动画完成时，解决Promise
                            setTimeout(resolve, 500); // 延迟500ms等待最后一个字符动画完成
                        }
                    }, delay);
                    delay += 200; // 每个字母之间的延迟时间
                });
            });
        }

        // 执行动画并在完成后淡入motivationalText
        animateTitle().then(() => {
            motivationalText.classList.add("visible");
        });


        var hoverSound = document.getElementById('hoverSound');
        var links = document.querySelectorAll('.ribbon a');

        links.forEach(function(link) {
            var soundSrc = link.getAttribute('data-sound');

            link.addEventListener('mouseenter', function() {
                hoverSound.src = soundSrc;
                hoverSound.currentTime = 0; // 重置音频播放时间
                hoverSound.play();
            });
        });
    });


</script>

</html>
